<template>
  <div class="majorEquipment">
    <el-row class="h100">
      <el-col :span="6" class="h100">
        <div class="text-border">
          <div class="text-header tree-header">
            <span>水司</span>
          </div>
          <div class="left">
            <selectTree
              :treeData="treeData"
              :defaultProps="defaultProps"
              nodeKey="id"
              ref="tree2"
              :defaultExpandKeys="defaultExpandKeys"
              @handleClickTree="handleClickTree"
            ></selectTree>
          </div>
        </div>
      </el-col>
      <el-col :span="12" class="h100">
        <div class="text-border">
          <div class="text-header">{{ title }}</div>
          <div class="search">
            <el-input
              placeholder="输入关键字过滤"
              size="mini"
              class="treeInput"
              v-model="filterText"
              suffix-icon="el-icon-search"
              clearable
            ></el-input>
          </div>
          <div class="middle">
            <tableList
              v-if="true"
              ref="klTable"
              v-bind="tableConfig"
              @selectChange="selectChange"
              @selectAll="selectAll"
              @defaultSelection="checkedUser"
            ></tableList>
          </div>
        </div>
      </el-col>
      <el-col :span="6" class="h100">
        <div class="text-border">
          <div class="text-header">
            已选择：
            <span>{{ choseNumber() }}</span>
          </div>
          <div class="right">
            <el-row :gutter="30" style="margin-bottom: 10px" v-if="multiple">
              <el-col :span="16">
                <el-input
                  placeholder="输入关键字过滤"
                  size="mini"
                  class="treeInput"
                  v-model="choseFilter"
                  suffix-icon="el-icon-search"
                  clearable
                ></el-input>
              </el-col>
              <el-col :span="8" style="text-align: right">
                <el-button
                  icon="el-icon-delete"
                  size="mini"
                  class="clearBtn"
                  @click="clearAll"
                  >清空</el-button
                >
              </el-col>
            </el-row>
            <div class="selectList">
              <div
                v-for="(i, index) in filterData"
                :key="index"
                class="chosedSelect"
                :class="{ isActive: i.id == currentId }"
                @click="clickChosed(i)"
              >
                <span>
                  <label>{{ i.postName }}</label>
                </span>
                <i
                  @click="delItem(index, i)"
                  class="el-icon-circle-close select-icon-close"
                ></i>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { applicationQueryList } from "@/api/systemManagement/applicationManagement.js";
import { postConfigList } from "@/api/systemManagement/postConfig.js";
import selectTree from "@/components/memberSelect/tree.vue";
import tableList from "@/components/memberSelect/tableList.vue";
export default {
  components: { selectTree, tableList },
  data() {
    return {
      treeData: [],
      type: "",
      title: "人员",
      treeName: "组织架构",
      defaultExpandKeys: [],
      defaultProps: {
        label: "name",
        children: "children",
      },
      currentOrg: null,
      outOrg: null, //是否是外单位
      btnDisable: null,
      outOrgName: "全部",
      radio: { equipmentName: "" }, // 选中数据
      //表格数据配置
      orgCode: "",
      tableConfig: {
        radioShow: false,
        showAllSearch: true,
        showIndex: false,
        selectionShow: true,
        showFilterBtn: false,
        showCustomBtn: false,
        rowKey: "id",
        searchObj: {
          searchMethod: (params, sortStr) => {
            this.getTableData(params, sortStr);
          },
          searchArr: [],
          queryData: {
            page: 1,
            pageSize: 15,
          },
        },
        tableMethods: {
          rowClick: (row) => {
            let res = this.chosedData.every((item) => {
              return item.id != row.id;
            });
            this.selectChange(res, row);

            this.$refs.klTable.toggleRowSelection(row);
          },
        },
        actionList: [],
        column: [
          {
            label: "岗位名称",
            prop: "postName",
          },
          {
            label: "创建人",
            prop: "createByName",
          },
          {
            label: "创建时间",
            prop: "createTime",
          },
        ],
        tableData: [],
        paginationObj: {
          pageSizes: [15, 30, 50, 100],
        },
        totalNumber: 0,
        showPagetion: true,
        pageSmall: true,
      },
      multiple: true,
      defaultOrg: "",
      filterData: [],
      chosedData: [],
      defaultIds: [],
      defaultJobs: [],
      currentId: "",
      filterText: "",
      choseFilter: "",
    };
  },
  created() {
    this.init();
  },
  watch: {
    filterText(val) {
      this.$refs.klTable.searchData();
    },
    choseFilter(val) {
      this.filterChoseData(val);
    },
    chosedData(val) {
      this.filterChoseData(this.choseFilter);
    },
  },
  methods: {
    init() {
      this.getTreeInfo();
    },
    //获取公司组织树信息
    getTreeInfo() {
      applicationQueryList().then((res) => {
        let data = res.data;
        this.$refs.tree2.setTreeData(data);
        this.appId = data[0].id;
        this.$refs.tree2.setCurrentKey(this.appId);
        this.$refs.klTable.searchData();
      });
    },
    //点击树
    handleClickTree(node) {
      this.appId = node.id;
      this.$refs.klTable.searchData();
    },
    //获取表格数据
    getTableData(params, sortStr) {
      let queryData = Object.assign({}, params);
      if (sortStr.length > 0) {
        queryData.orders = sortStr;
      }
      queryData.appId = this.appId;
      queryData.postName = this.filterText;
      postConfigList(queryData).then((res) => {
        this.$set(this.tableConfig, "tableData", res.data.list);
        this.$set(this.tableConfig, "totalNumber", res.data.total);
      });
    },
    //勾选已选人员或组织
    checkedUser() {
      if (this.chosedData.length > 0) {
        this.chosedData.forEach((item) => {
          this.tableConfig.tableData.forEach((value) => {
            if (value.id == item.id) {
              this.$refs.klTable.selectioned(value);
            }
          });
        });
      }
    },
    //添加或取消已选用户
    selectChange(selected, row) {
      if (selected) {
        let hasSame = false;
        if (this.allowSameUser) {
          this.chosedData.push(row);
        } else {
          this.chosedData.forEach((item, index) => {
            if (item.id == row.id) {
              hasSame = true;
              this.chosedData.splice(index, 1, row);
              let onceData = this.tableConfig.tableData.find((child) => {
                return child.id == item.id;
              });
              let len = this.tableConfig.tableData.filter(
                (child) => child.id == row.id
              );
              if (len.length > 1) {
                this.$refs.klTable.selectionCalce(onceData);
              }
            }
          });
          if (!hasSame) {
            this.chosedData.push(row);
          }
        }
      } else {
        this.chosedData.forEach((item, i) => {
          if (item.id == row.id) {
            this.chosedData.splice(i, 1);
            return;
          }
        });
      }
    },
    //选择全部
    selectAll(list) {
      this.tableConfig.tableData.forEach((item, i) => {
        this.selectChange(list, item);
      });
    },
    //点击移除的时候触发
    delItem(index, row) {
      this.chosedData.forEach((item, i) => {
        if (row.id == item.id) {
          this.chosedData.splice(i, 1);
        }
      });
      this.tableConfig.tableData.map((item) => {
        if (item.id === row.id) {
          this.$refs.klTable.selectionCalce(item);
        }
      });
    },
    //清除所有
    clearAll() {
      this.chosedData.length = 0;
      this.filterData = [];
      this.$refs.klTable.clearSelection();
    },
    //过滤已选人员
    filterChoseData(val) {
      let reg = new RegExp(val);
      this.filterData = this.chosedData.filter((item) => {
        return item.postName.match(reg);
      });
    },
    //选择人员或组织数量
    choseNumber() {
      return `${this.chosedData.length}个`;
    },
    clickChosed(i) {
      this.currentId = i.id;
    },
    //返回选择的数据
    getSelectData() {
      let data = JSON.parse(JSON.stringify(this.chosedData));
      return data;
    },
  },
};
</script>
<style lang="less" scoped>
.majorEquipment {
  height: 600px;
  /deep/.el-input--mini .el-input__inner {
    height: 32px;
    line-height: 32px;
  }
  .search {
    width: 40%;
    margin: 0 0 10px 10px;
  }
  .text-border {
    position: relative;
    height: 100%;
    margin: 5px;
    border: 1px #ebebeb solid;
    .text-header {
      height: 40px;
      line-height: 40px;
      padding: 0 14px;
      border-bottom: 1px #ebebeb solid;
      text-align: left;
      font-weight: 700;
      color: #666;
    }
    .tree-header {
      display: flex;
      justify-content: space-between;
    }
    .text-header:first-child {
      margin-bottom: 15px;
    }
    .left {
      height: calc(100% - 40px);
    }
    .middle {
      padding: 0 10px 10px 10px;
      height: calc(100% - 115px);
    }
    .right {
      height: calc(100% - 35px);
      padding: 0 10px;
      .selectList {
        height: calc(100% - 88px);
        overflow: auto;
        .chosedSelect {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 4px 10px;
          line-height: 23px;
        }
        .clearBtn {
          border: 1px solid #0d60b4;
          color: #0d60b4;
        }
        .isActive {
          background-color: #f8f8f8;
        }
      }
    }
    .table-input {
      width: 95% !important;
      margin: 0 auto;
      .tableInputLeft {
        float: left;
        width: 35%;
      }
      .tableInputRight {
        float: right;
        width: 60%;
      }
      .tableInputLeft,
      .tableInputRight {
        height: 30px;
        line-height: 30px;
        border-radius: 2px;
        margin-bottom: 15px;
      }
    }
    .clearF::after {
      content: "";
      display: table;
      height: 0;
      clear: both;
      visibility: hidden;
    }
    .select-text {
      float: left;
      margin-left: 10px;
      height: 20px;
      line-height: 12px;
    }
    .select-icon-close {
      float: right;
      margin-right: 10px;
    }
  }
  .outOrg {
    margin-left: 10px;
    background: rgba(250, 162, 36, 0.2);
    //color: #FAA224 ;
    opacity: 0.2;
    color: black;
    border-radius: 4px;
    padding: 1px 4px;
  }
  .interim {
    margin-left: 10px;
    background: rgba(239, 76, 76, 0.2);
    opacity: 0.2;
    border-radius: 4px;
    padding: 1px 8px;
    color: red;
  }
}
</style>
